<template>
    <div class="itpage">
        <div class="page-content">
            <div class="it-top">
                <!-- 区域设备数量统计 -->

                <card scrapeDataTitle="区域设备数量统计" :showTitleBack="false" :showCardBackColor="true">
                    <EquipmentStatistics :data="localStatics"></EquipmentStatistics>
                </card>

                <!-- 设备数量统计 -->

                <card scrapeDataTitle="区域设备数量统计" :showTitle="false" :showTitleBack="false" :showCardBackColor="false">
                    <EquipmentData></EquipmentData>
                </card>

                <!-- 告警统计 -->

                <card scrapeDataTitle="区域设备数量统计" :showTitle="false" :showTitleBack="false" :showCardBackColor="true">
                    <EquipmentStatistics :data="localStatics"></EquipmentStatistics>
                </card>

            </div>
            <div class="it-centre">
                <div class="centre-left">
                    <card scrapeDataTitle="区域设备在线率统计" :showCardBackColor="true">
                        <locationStatistics></locationStatistics>
                    </card>

                    <card scrapeDataTitle="告警分类统计" :showCardBackColor="true">

                    </card>
                </div>
                <div class="centre-center">
                    <card scrapeDataTitle="区域设备告警数量统计" :showCardBackColor="true">

                    </card>

                    <card scrapeDataTitle="近7天告警统计" :showCardBackColor="true">
                        <Intraweekalarmstatistics :cheight="'270'"></Intraweekalarmstatistics>
                    </card>
                </div>
                <div class="centre-right">
                    <card scrapeDataTitle="今日告警处理率" :showCardBackColor="true">

                    </card>

                    <card scrapeDataTitle="告警情况统计" :showCardBackColor="true">

                    </card>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import EquipmentStatistics from './components/EquipmentStatistics.vue';
import EquipmentData from './components/EquipmentData.vue';
import Intraweekalarmstatistics from '../alert/components/Intraweekalarmstatistics.vue';
import locationStatistics from './components/locationStatistics.vue';
const localStatics = ref([
    { title: '01区', value: 156 },
    { title: '02区', value: 156 },
    { title: '03区', value: 156 },
    { title: '04区', value: 156 },
])

</script>

<style scoped lang="scss">
.itpage {
    width: 100%;
    height: 100%;
    background-color: #081F30FF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4000;

    .page-content {
        margin-top: 6vh;
        height: fit-content;
        display: flex;
        flex-direction: column;


        width: 100%;
        height: calc(100% - 14vh);
        padding: 0 clamp(4.375rem, 3.65vw, 8.75rem);
        box-sizing: border-box;

        &>div {
            width: 100%;
            display: flex;
        }

        .it-top {
            height: 20%;
            margin-bottom: 20px;

            & .card {
                &:nth-child(1) {
                    flex: 0.25;
                }

                &:nth-child(2) {
                    flex: 0.5;
                }

                &:nth-child(3) {
                    flex: 0.25;
                }
            }

        }

        .it-centre {
            height: 80%;
            display: flex;
            justify-content: space-between;

            &>div {
                flex: 0.32;
            }

            .centre-left {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                & .card {
                    &:nth-child(1) {
                        flex: 0.48;
                    }

                    &:nth-child(2) {
                        flex: 0.48;
                    }

                }
            }

            .centre-center {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                & .card {
                    &:nth-child(1) {
                        flex: 0.48;
                    }

                    &:nth-child(2) {
                        flex: 0.48;
                    }

                }
            }

            .centre-right {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                & .card {
                    &:nth-child(1) {
                        flex: 0.4;
                    }

                    &:nth-child(2) {
                        flex: 0.57;
                    }

                }
            }
        }
    }
}
</style>